<template>
  <div class="person">
    <ul>
      <li v-for="person in personList" :key="person.id">
        <span>姓名：{{ person.name }}，</span>
        <span>年龄：{{ person.age }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import {Persons} from "@/types";

// 接收外部传递的数据
// defineProps(['personList'])

// 接收外部传递的数据，同时将 props 保存起来
// let props = defineProps(['personList'])
// console.log(props.personList)

// 接收外部传递的数据，限制类型
// defineProps<{ personList: Persons }>();

// 接收外部传递的数据，限制类型，限制必要性，指定默认值
withDefaults(defineProps<{ personList?: Persons }>(), {
  personList: () => [
    {id: '1', name: '张三', age: 18},
    {id: '2', name: '李四', age: 19},
    {id: '3', name: '王五', age: 20},
    {id: '4', name: '赵六', age: 21},
    {id: '5', name: '田七', age: 22},
  ]
})
</script>

<style scoped lang="scss">

</style>
